{extend name="base/common"}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/datepicker/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="__STATIC__/iCheck/custom.css">
<link rel="stylesheet" href="__ADMIN__/css/chosen/chosen.css">
<link rel="stylesheet" href="__HOME__/css/word/detail1.css">
<style>
    audio{
        margin-top:10px;
    }
    textarea{
        resize:none;
    }
    .imggroup{
        position: relative;
    }
    .imgbox{
        height: 100px;
        width: 200px;
        margin-top: 5px;
        margin-bottom: 0;
    }
    .imgfile{
        height: 100px;
        width: 200px;
        position: absolute;
        top:0;
        opacity: 0;
    }
    .modal-body{
        height: auto;
    }
    .preview-content{
        width: 375px;
        height: 667px;
        overflow-y: scroll;
        box-shadow: 1px 3px 8px rgba(153, 153, 153, 0.6);
    }
    .showbox {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5%;
        background: rgba(0, 0, 0, 0.3);
        display: none;
        z-index: 999;
    }

    .loader {
        position: relative;
        margin: 0 auto;
        width: 100px;
        margin-top: 30%;
    }
    .loader:before {
        content: '';
        display: block;
        padding-top: 50%;
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }
        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color {
        100%,
        0% {
            stroke: #d62d20;
        }
        40% {
            stroke: #0057e7;
        }
        66% {
            stroke: #008744;
        }
        80%,
        90% {
            stroke: #ffa700;
        }
    }
    .element.style {
        margin: 4vw auto 0;
        width: 82.3vw;
        background: #fff;
    }
</style>
{/block}

{block name="page-header"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>每日单词</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{:Url('index')}">主页</a>
            </li>
            <li class="active">
                <strong>{$msg['id'] ? "编辑":"新增"}</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{$msg['id'] ? "编辑":"新增"}专题</h5>
                    <div class="ibox-tools">
                        <a href="javascript:window.history.go(-1);" class="btn btn-white btn-sm"><i class="fa fa-reply"></i> 返回</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form id="form" class="form-horizontal" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>封面:</label>
                            </div>
                            {eq name="msg" value=""}
                            <div class="col-lg-5">
                                <div class="imggroup">
                                    <img src="" alt='图片' class='thumbnail imgbox'>
                                    <input type="file" class="imgfile" accept="image/jpg, image/png, image/gif, image/jpeg">
                                    <input type="hidden" name="front_cover" class="img"  value="" required="">
                                </div>
                                <b>推荐尺寸：750*400px</b>
                            </div>
                            {else/}
                            <div class="col-lg-5">
                                <div class="imggroup">
                                    <img src="{$msg.url}" alt='图片' class='thumbnail imgbox'>
                                    <input type="file" class="imgfile" accept="image/jpg, image/png, image/gif, image/jpeg">
                                    <input type="hidden" name="front_cover" class="img"  value="{$msg.front_cover}" required="">
                                </div>
                                <b>推荐尺寸：750*400px</b>
                            </div>
                            {/eq}
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>类型:</label>
                            </div>
                            <div class="col-lg-11">
                                <select class="form-control" name="type">
                                    {neq name="msg" value=""}
                                    <option value="1" {eq name="msg.type" value="1"} selected {/eq}>考研</option>
                                    <option value="2" {eq name="msg.type" value="2"} selected {/eq} >专升本</option>
                                    <option value="3" {eq name="msg.type" value="3"} selected {/eq} >四六级</option>
                                    <option value="4" {eq name="msg.type" value="4"} selected {/eq} >雅思</option>
                                    <option value="5" {eq name="msg.type" value="5"} selected {/eq} >托福</option>
                                    {else/}
                                    <option value="1" >考研</option>
                                    <option value="2" >专升本</option>
                                    <option value="3" >四六级</option>
                                    <option value="4" >雅思</option>
                                    <option value="5" >托福</option>
                                    {/neq}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>音频1名称:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入音频名称" class="form-control form_title" name="record1_name" value="{$msg.record1_name||default=''}">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>音频1路径:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入音频路径" class="form-control form_title" name="record1" value="{$msg.record1||default=''}">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>音频2名称:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入音频名称" class="form-control form_title" name="record2_name" value="{$msg.record2_name||default=''}">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>音频2路径:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入音频路径" class="form-control form_title" name="record2" value="{$msg.record2||default=''}">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>音频3名称:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入音频名称" class="form-control form_title" name="record3_name" value="{$msg.record3_name||default=''}">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>音频3路径:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入音频路径" class="form-control form_title" name="record3" value="{$msg.record3||default=''}">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>标题:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入标题" class="form-control form_title" name="title" value='{$msg.title || default=""}'>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>简介:</label>
                            </div>
                            <div class="col-lg-11">
                                <textarea placeholder="请输入简介" rows="3" cols="163" name="description">{$msg.description || default=""}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 control-label">
                                <label>内容:</label>
                            </div>
                            <div class="col-lg-11">
                                <div class=" float-e-margins">
                                    <div class="ibox-content no-padding borders">
                                        <script id="container" name="content" type="text/plain">{$msg.content||default=''}</script>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>第几天:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="number" placeholder="请输入第几天" class="form-control form_title" name="day" value="{$msg.day||default=1}">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>发布人:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入发布人" class="form-control form_title" name="publisher" value="{$msg.publisher||default='点对点教育'}">
                            </div>
                        </div>
                        {eq name="msg" value=""}
                        <input type="hidden" name="code" value="{$code}">
                        {else/}
                        <input type="hidden" name="code" value="{$msg.code}">
                        {/eq}
                        <input type="hidden" name="id" value="{$msg.id||default=''}">

                        <div class="form-group">
                            <div class="col-lg-11 col-lg-offset-1">
                                <button class="btn btn-primary preview" type="button" data-toggle="modal" data-target="#modal">预览</button>
                                <button class="btn btn-primary submit-btn post-add" type="button" target-form="form-horizontal" >发布</button>
                                <a class="btn btn-default" href="javascript:window.history.go(-1);">返回</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title text-center" id="myModalLabel">预览</h4>
            </div>
            <div class="modal-body">
                <div class="pre left">
                    <div class="preview-content">
                        <div class="article">
                            <div class="title limit_">标题</div>
                            <div class="note">
                                <span class="time">2017-01-01</span>
                                <span class="publisher">发布人</span>
                            </div>
                            <div class="content">
                                <div class="content_">内容</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="showbox">
    <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
{/block}

{block name="script"}
<script src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
<script src="__STATIC__/datepicker/bootstrap-datetimepicker.js"></script>
<script src="__STATIC__/iCheck/icheck.min.js"></script>
<script src="__STATIC__/ueditor/ueditor.config.js"></script>
<script src="__STATIC__/ueditor/ueditor.all.min.js"></script>
<script src="__ADMIN__/js/chosen.jquery.js"></script>
<script>
    $(function(){
        //导航高亮
        highlight_subnav("{:Url('index')}");

        //上传图片
        var plus = $('.plus');
        var imgnum  = $('[n]' ).attr('n');
        plus.on('click',function(){
            var it = $(this);
            it.hide().next().fadeIn();
            imgnum = 3;
            if(!it.hasClass('plus2')){
                plus.eq(1).fadeIn();
                imgnum = 2
            }
        });
        $(document).ready(function () {
            $(".imgfile").on("change",function(){
                var size = ($(this)[0].files[0].size / 1024).toFixed(2);
                var imgBox = $(this);
                if(size <= 1024*5){
                    var img = $(this)[0].files[0];
                    var formData = new FormData();
                    var pic=$(this);
                    formData.append("picture",img);
                    $.ajax({
                        type:"post",
                        url:"{:Url('File/uploadPicture')}",
                        data:formData,
                        processData : false,
                        contentType : false,
                        success:function(msg){
                            var msg = $.parseJSON(msg);
                            var path = "/DDDeducation/public"+msg.data.path;
                            if(msg['code'] == 1){
                                imgBox.siblings(".img").val(msg.data["id"]);
                                //显示图片缩略图
                                pic.parent().find("img" ).attr({src:path});
                            } else {
                                warning({msg:msg['msg']});
                                return;
                            }
                        }
                    });
                } else {
                    warning({msg:"您选择的图片超过5mb，请重新选择"});
                    return;
                }
            });
        });
        //百度编辑器
        var ue = UE.getEditor('container',{
            initialFrameHeight:400
        });
        //预览
        $('#model').modal('show');
        $('.preview').on('click', function (){
            var title = $("input[name='title']").val();
            var publisher = $("input[name='publisher']").val();
            var content = ue.getContent();
            var code = $("input[name='code']").val();
            var date = new Date();
            var seperator1 = "-";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
            $('.preview-content .title' ).text(title);
            $('.preview-content .publisher' ).text(publisher);
            $('.preview-content .time' ).text(currentdate);
            $('.preview-content .content_' ).html(content);
        });
        $(".post-add").on("click",function(){
            /*重组轮播图，删除多余字符串（i是键值，1表示几位开始*/
            var it=$(this);
            if ($("input[name='record1']").val() == '' && $("input[name='record2']").val() == '' && $("input[name='record3']").val() == ''){
                updateAlert('音频不能同时为空', 'error');
                return false;
            }
            if (($("input[name='record1']").val() != '' && $("input[name='record1_name']").val() == '') || ($("input[name='record1_name']").val() != '' && $("input[name='record1']").val() == '')){
                updateAlert('音频和名称不能同时为空', 'error');
                return false;
            }
            if (($("input[name='record2']").val() != '' && $("input[name='record2_name']").val() == '') || ($("input[name='record2_name']").val() != '' && $("input[name='record2']").val() == '')){
                updateAlert('音频和名称不能同时为空', 'error');
                return false;
            }
            if (($("input[name='record3']").val() != '' && $("input[name='record3_name']").val() == '') || ($("input[name='record3_name']").val() != '' && $("input[name='record3']").val() == '')){
                updateAlert('音频和名称不能同时为空', 'error');
                return false;
            }
            var data = {
                id:$("input[name='id']").val(),
                front_cover:$("input[name='front_cover']").val(),
                type:$("select[name='type']").val(),
                record1:$("input[name='record1']").val(),
                record1_name:$("input[name='record1_name']").val(),
                record2:$("input[name='record2']").val(),
                record2_name:$("input[name='record2_name']").val(),
                record3:$("input[name='record3']").val(),
                record3_name:$("input[name='record3_name']").val(),
                title:$("input[name='title']").val(),
                content:ue.getContent(),
                publisher:$("input[name='publisher']").val(),
                description:$("textarea[name='description']").val(),
                day:$("input[name='day']").val(),
                status:0,
            };
            $.ajax({
                type:"post",
                url:$("#form").attr("action"),
                data:data,
                success:function(data){
                    if(data.code == 1){
                        if (data.url) {
                            updateAlert(data.msg + ' 页面即将自动跳转~','success');
                        }else{
                            updateAlert(data.msg ,'success');
                        }
                        it.prop('disabled','true');
                        it.next('button').prop('disabled','true');
                        setTimeout(function(){
                            if (data.url) {
                                location.href=data.url;
                            } else {
                                location.reload();
                            }
                            it.removeAttr('disabled');
                            it.next('button').removeAttr('disabled')
                        },2000);
                    } else {
                        updateAlert(data.msg, 'error');
                        it.attr('disabled','true');
                        it.next('button').prop('disabled','true');
                        setTimeout(function(){
                            it.removeAttr('disabled');
                            it.next('button').removeAttr('disabled')
                        },2000);
                    }
                }
            });
            return false;
        });

    })
</script>


<!--时间日历-->
<script type="text/javascript">

    $(function(){
        //    时间日历
        $( ".datetimepicker" ).datetimepicker( {
            language:  'cn',
            format: 'yyyy-mm-dd hh:ii',
            minView: "hour",
            forceParse: false,
            todayBtn: true,
            autoclose: true,
            todayHighlight: 1,
            minuteStep: 5

        });
        //    单选按钮
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });

    })

</script>
{/block}